<template>
    <div class="appointmentrecord">
        <el-card shadow="never animate__animated animate__fadeIn animate__fast">
            <div class="title-top onflex animate__animated animate__fadeInUp">
                <h2>预约记录</h2>
            </div>
            <div
                class="
                    operation
                    onflex
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-form
                    :inline="true"
                    :model="formInline"
                    class="demo-form-inline"
                >
                    <el-form-item>
                        <el-input
                            v-model="formInline.className"
                            placeholder="课程名称"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select
                            v-model="value"
                            filterable
                            @change="selCoach"
                            placeholder="请选择课程教练"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.coachName"
                                :label="item.coachName"
                                :value="item.coachName"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit"
                            >查询</el-button
                        >
                        <el-button @click="getRecord">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- <el-button type="primary" @click="toCoachSign"
                    >教练签到</el-button
                > -->
            </div>
            <div
                class="
                    table-record
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column
                        fixed
                        prop="courseName"
                        label="课程名称"
                        width="300"
                    >
                    </el-table-column>
                    <el-table-column prop="coachName" label="教练">
                    </el-table-column>
                    <el-table-column prop="venueName" label="场馆">
                    </el-table-column>
                    <el-table-column prop="site" label="场地">
                    </el-table-column>
                    <el-table-column
                        prop="classTime"
                        label="课程时间"
                        width="300"
                    >
                    </el-table-column>
                    <el-table-column prop="peopleNumber" label="预约人数">
                    </el-table-column>
                    <!-- <el-table-column fixed="right" label="操作" width="150">
                        <template slot-scope="scope">
                            <el-button
                                @click="handleClick(scope.row)"
                                type="text"
                                size="small"
                                >预约记录</el-button
                            >
                        </template>
                    </el-table-column> -->
                </el-table>
            </div>
            <div
                class="
                    pagination
                    animate__animated animate__fadeIn animate__fast
                "
            >
                <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change="currentChange"
                    :page-size="pageSize"
                    :total="pageTotal"
                >
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 课程名称输入框
            formInline: {
                className: "",
            },
            // 下拉选择教练
            options: [
                // {
                //     value: "黄金糕",
                // },
                // {
                //     value: "双皮奶",
                // },
                // {
                //     value: "蚵仔煎",
                // },
                // {
                //     value: "龙须面",
                // },
                // {
                //     value: "北京烤鸭",
                // },
            ],
            value: "",
            //表格数据
            tableData: [
                // {
                //     className: "快速减脂教程训练1",
                //     coachName: "教练1",
                //     venue: "健身多功能馆1",
                //     field: "成人团课区1",
                //     classTime: "2020-03-20 20:30至21:15",
                //     numPelpeo: "0/10",
                // },
                // {
                //     className: "快速减脂教程训练2",
                //     coachName: "教练2",
                //     venue: "健身多功能馆2",
                //     field: "成人团课区2",
                //     classTime: "2020-03-20 20:30至21:15",
                //     numPelpeo: "0/10",
                // },
                // {
                //     className: "快速减脂教程训练3",
                //     coachName: "教练3",
                //     venue: "健身多功能馆3",
                //     field: "成人团课区3",
                //     classTime: "2020-03-20 20:30至21:15",
                //     numPelpeo: "0/10",
                // },
                // {
                //     className: "快速减脂教程训练4",
                //     coachName: "教练4",
                //     venue: "健身多功能馆4",
                //     field: "成人团课区4",
                //     classTime: "2020-03-20 20:30至21:15",
                //     numPelpeo: "0/10",
                // },
            ],
            //分页
            cPage: 1,
            pageSize: 5,
            pageTotal: 0,
        };
    },
    methods: {
        selCoach(value) {
            this.value = value;
            console.log(this.value);
        },
        //查询按钮
        onSubmit() {
            // console.log(this.formInline.className);
            console.log(this.value);
            if (this.formInline.className == "") {
                this.$axios({
                    url: "/gym/statistics/appointmentRecordStatistics",
                    method: "post",
                    data: {
                        coachName: this.value,
                    },
                }).then((res) => {
                    if (res.data.code != 200) {
                    } else {
                        console.log(res);
                        this.tableData = res.data.data;
                        this.pageTotal = res.data.count;
                    }
                });
            } else {
                this.$axios({
                    url: "/gym/statistics/appointmentRecordStatistics",
                    method: "post",
                    data: {
                        courseName: this.formInline.className,
                    },
                }).then((res) => {
                    if (res.data.code != 200) {
                    } else {
                        console.log(res);
                        this.tableData = res.data.data;
                        this.pageTotal = res.data.count;
                    }
                });
            }
        },
        //表格预约记录按钮
        handleClick(row) {
            console.log(row);
            this.$router.push({ path: "/recordtable" });
        },
        //点击页码
        currentChange(page) {
            this.cPage = page;
            this.getRecord();
            console.log(page);
        },
        //去教练签到
        toCoachSign() {
            this.$router.push({ path: "/coachsign" });
        },

        getRecord() {
            this.$axios({
                url: "/gym/statistics/appointmentRecordStatistics",
                method: "post",
                data: {
                    limit: this.pageSize,
                    page: this.cPage,
                },
            }).then((res) => {
                console.log(res.data.data);
                if (res.data.code != 200) {
                } else {
                    this.options = res.data.data;
                    this.tableData = res.data.data;
                    this.pageTotal = res.data.count;
                    console.log(this.options);
                    // console.log(this.pageTotal, this.pageSize);
                }
            });
        },
    },
    mounted() {
        this.getRecord();
    },
};
</script>

<style lang="less" scoped>
.text-l {
    text-align: left;
}
.title-top {
    line-height: 50px;
    border-bottom: 1px solid #00000020;
    padding-bottom: 15px;
}
.operation {
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    height: 40px;
    align-content: center;
    justify-content: space-between;
}
.pagination {
    text-align: right;
    margin-top: 20px;
}
.el-table {
    /deep/ .cell,
    /deep/ span {
        text-align: center !important;
    }
}
</style>